<template>
  <div class="community-page" v-if="communityInfo.complaint">
    <!-- 第一行 -->
    <div class="row-1">
      <div class="col-1">
        <WorkOrder
          title="投诉工单"
          class="complaint-work-order"
          :list="communityInfo.complaintList.list"
          :txt-list="communityInfo.complaintList.txtList"
        />
        <WorkOrder
          title="维修工单"
          class="repair-work-order"
          :txt-list="communityInfo.repairList.txtList"
          :list="communityInfo.repairList.list"
        />
      </div>
      <div class="col-2">
        <CommunitySummary :item="communityInfo.summary" />
      </div>
      <div class="col-3">
        <TodayInfo :item="communityInfo.todayInfo" />
      </div>
    </div>
    <!-- 第二行 -->
    <div class="row-2">
      <InfoBoard :list="communityInfo.infos" />
      <HouseUse :list="communityInfo.houseUse" />
      <CommunityRank
        :indicator="communityInfo.rankInfo.indicator"
        :data="communityInfo.rankInfo.data"
      />
      <PersonRatio :data="communityInfo.personInfo" />
    </div>
  </div>
</template>

<script>
import WorkOrder from '@/components/community2/WorkOrder'
import InfoBoard from '@/components/community2/InfoBoard'
import CommunitySummary from '@/components/community2/Summary'
import TodayInfo from '@/components/community2/TodayInfo'
import HouseUse from '@/components/community2/HouseUse'
import PersonRatio from '@/components/community2/PersonRatio'
import CommunityRank from '@/components/community2/RankInfo'
import collapse from '@/assets/collapse.png'

export default {
  components: {
    WorkOrder,
    InfoBoard,
    CommunitySummary,
    TodayInfo,
    HouseUse,
    PersonRatio,
    CommunityRank
  },
  data () {
    return {
      collapse
    }
  },
  computed: {
    communityInfo () {
      console.log(this.$store.getters.communityInfo)
      return this.$store.getters.communityInfo
    },
  },
}
</script>

<style lang="scss">
.community-page {
  height: 100%;
  width: 100%;
  pointer-events: none;
  padding: 0 10px 10px 10px;

  padding: 0 $base * 10px $base * 10px $base * 10px;

  .row-1 {
    display: flex;
    .col-1 {
      padding-top: $base * 78px;
    }
    .col-2 {
      flex: 1;
    }
    .col-3 {
      padding-top: $base * 78px;
    }
  }
  .row-2 {
    display: flex;
    justify-content: space-between;
  }

  .complaint-work-order {
    height: $base * 325px;
  }
  .repair-work-order {
    height: $base * 325px;
  }
}
</style>